<template>
    <div class="applyOpenAccount">
        <h3>U车贷借款存管开户</h3>
        <el-form label-width="140px" :model="listData">
            <el-form-item label="真实姓名：" class="form-item-po" prop="realName">
                <span>{{listData.realName}}</span>
            </el-form-item>
            <el-form-item label="身份证号码：" class="form-item-po" prop="idcard">
                <span>{{listData.idcard}}</span>
            </el-form-item>
            <el-form-item label="银行编码：" class="form-item-po" prop="bank">
                <span>{{listData.bank}}</span>
            </el-form-item>
            <el-form-item label="银行卡号：" class="form-item-po" prop="bankAccount">
                <span>{{listData.bankAccount}}</span>
            </el-form-item>
            <el-form-item label="预留银行手机号码：" class="form-item-po" prop="bankPhone">
                <span>{{listData.bankPhone}}</span>
            </el-form-item>
            <el-form-item label="渠道：" class="form-item-po" prop="channelNo">
                <el-select v-model="listData.channelNo" value="999" :disabled="true">
                    <el-option label="优投金服" value="999"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item><span style="color: red;" v-if="listData.loanStatus === 2">账户已开户</span></el-form-item>
            <el-form-item class="btn-box">
                <el-button @click="back()">上一步</el-button>
                <el-button type="primary" v-if="listData.loanStatus === 2" @click="sureBuserSave()">确 定</el-button>
                <el-button type="primary" @click="postBuserSave()" v-else>开 户</el-button>
            </el-form-item>
            <el-dialog
                title="提示"
                :visible.sync="tipsDialog"
                size="tiny"
                :show-close= false
                >
                <span>如果浏览器不能自动跳转，请点击下面链接跳转</span>
                <div class="redirect_url">
                    <a :href="redirect_url" target="_blank" @click="closeBn">存管开户链接</a>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
              </span>
            </el-dialog>
        </el-form>
    </div>
</template>

<script>
    import { loanUserInfo, buserSave, borrowAccountOpen, updateLoanCheck } from "@/api/api";
    export default {
        name: "applyOpenAccount",
        data () {
            return {
                listData: {},
                tipsDialog: false,
                redirect_url: '/apply'
            };
        },
        watch: {
            $route: function (to) {
                if(to.name === "applyOpenAccount"){
                    this.loanUserInfoLoad();
                }
            }
        },
        mounted (){
            this.$nextTick(function () {
                this.loanUserInfoLoad();
            });
        },
        methods: {
            closeBn() {
                console.log("fwew");
                this.tipsDialog = false;
                this.$router.push({path: '/apply'});
            },
            handleClose() {
                this.$confirm('取消后五分钟才能发起开户流程').then(_ => {
                    this.tipsDialog = false;
                }).catch(_ => {});
            },
            // 上一步；
            back () {
                this.$router.go(-1);
            },
            // 获取信息
            async loanUserInfoLoad () {
                let _this = this;
                await loanUserInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    if (Data) {
                        _this.listData = Data;
                        console.log(_this.listData);
                        _this.listData.channelNo = "999";
                    }
                });
            },
            // 确定
            sureBuserSave () {
                let _this = this;
                updateLoanCheck({
                    "userNo": this.listData.userNo,
                    "loanNo": this.listData.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    if(res.data.state.code === "200") {
                        _this.$router.push({path: '/apply'});
                    }
                    console.log(Data);
                });
            },
            // 借款用户注册及开通银行托管；
            async postBuserSave () {
                let _this = this;
                await buserSave({
                    "hkUser": {
                        "mobile_no": this.listData.phone,
                        "passwd": this.listData.password,
                        "realname": this.listData.realName,
                        "idcard": this.listData.idcard,
                        "bank_code": this.listData.bank,
                        "card_no": this.listData.bankAccount,
                        "bank_mobile_no": this.listData.bankPhone
                    },
                    "userReala": {
                        "userNo": this.listData.userNo,
                        "channelNo": this.listData.channelNo
                    }
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    if(res.data.state.code === "200") {
                        console.log(Data);
                        var bl = window.open(Data.redirect_url);
                        console.log('打开新窗口', bl);
                        if(!bl){
                            this.redirect_url = Data.redirect_url;
                            this.tipsDialog = true;
                            return ;
                        }
                        _this.$router.push({path: '/apply'});
                        return false;
                    } else if (res.data.state.code === "300") {
                        _this.$message(Data.message);
                    }
                });
            },
            async borrowAccountPass() {
                let _this = this;
                borrowAccountOpen({
                    "user_id": _this.listData.userNo,
                    "realname": _this.listData.realName,
                    "idcard": _this.listData.idcard,
                    "bank_code": _this.listData.bank,
                    "card_no": _this.listData.bankAccount,
                    "mobile_no": _this.listData.bankPhone
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    if(res.data.state.code === "200") {
                        if (Data.redirect_url) {
                            window.open(Data.redirect_url);
                            _this.$router.push({path: '/apply'});
                        } else {
                            _this.$message({
                                message: Data.message,
                                type: 'error'
                            });
                        }
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .applyOpenAccount{
        width: 400px;
        margin: 40px auto;
        h3{
            text-align: center;
            margin: 30px 0 50px;
            font-size:16px;
        }
        .el-form{
            .el-form-item{
                margin: 20px 10px;
            }
            .btn-box{
                margin-top:50px;
            }
        }
    }
    .redirect_url{
        margin-top: 20px;
    }
</style>
